﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>高德地图车辆监控</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        .amap-info-window{
            width: 150px;
            background: #fff;
            border-radius: 3px;
            padding: 3px 7px;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: relative;
        }
        .amap-info-sharp{
            position: absolute;
            top: 21px;
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #fff;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=e86d1e0833bfea2abbbe6a4a696b998c&&plugin=AMap.Scale"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/data/mock_position.js"></script>
<script src="qrc:///resources/qwebchannel.js"></script>
<script>
    var map = new AMap.Map('container', {
        viewMode: '3D',
        zoom:11,
        center: [116.397428, 39.90923],
        showIndoorMap: false,
    });
	
    var scale = new AMap.Scale();
	
	// 存储所有车辆的标记
    var vehicleMarkers = {};
    var labelsLayer = null;
	
    var normalMarker = new AMap.Marker({
        anchor: 'center',
        offset: [0, -15],
    });
	
    map.on('complete', function () {
        map.addControl(scale);
    });

    window.myChannel = new QWebChannel(qt.webChannelTransport, function (channel) {
        window.myChannel = channel.objects.qtChannel;
    });
	
    function updateVehicles(vehicles) {
		// 如果图层不存在则创建
		if (!labelsLayer) {
			labelsLayer = new AMap.LabelsLayer({
				zooms: [3, 20],
				zIndex: 1000,
				collision: false
			});
			
			map.add(labelsLayer);
		}
		
		vehicles.forEach(function(vehicle) {
			var id = vehicle.id;
            var position = [vehicle.lng, vehicle.lat];
            var angle = vehicle.angle;
			
			if (id in vehicleMarkers) {
                // 如果标记已存在，更新位置
                vehicleMarkers[id].setPosition(position);
				vehicleMarkers[id].setRotation(angle);
            } else {
                // 如果标记不存在，创建新标记
				var icon = {
					type: 'image',
					image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
					size: [13, 26],
					anchor: 'center',
					rotation: angle,
				};
				
				var labelMarker = new AMap.LabelMarker({
					position: position,
					icon: icon
				});
				
				vehicleMarkers[id] = labelMarker;
				labelsLayer.add(labelMarker);
				
				labelMarker.on('click', function(e){
					var position = e.data.data && e.data.data.position;

					if (position) {
						normalMarker.setContent(
							'<div class="amap-info-window">'
								+ id +
								'<div class="amap-info-sharp"></div>' +
							'</div>');
						normalMarker.setPosition(position);
						map.add(normalMarker);
					}
				});

				labelMarker.on('mouseout', function() {
					map.remove(normalMarker);
				});
			}
		});
    }
</script>
</body>
</html>
